<%--
  Created by IntelliJ IDEA.
  User: Christopher
  Date: 2023/8/7
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>大帅体检 | 给您健康</title>

  <link href="${pageContext.request.contextPath}/css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="${pageContext.request.contextPath}/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="${pageContext.request.contextPath}/css/nprogress/nprogress.css" rel="stylesheet">

  <!-- iCheck -->
  <link href="${pageContext.request.contextPath}/css/iCheck/skins/flat/green.css" rel="stylesheet">
  <!-- bootstrap-progressbar -->
  <link href="${pageContext.request.contextPath}/css/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
  <!-- JQVMap -->
  <link href="${pageContext.request.contextPath}/css/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>

  <!-- Custom Theme Style -->
  <link href="${pageContext.request.contextPath}/css/custom.css" rel="stylesheet">
  <style>
    .container .content{
      line-height: 500px;
      text-align: center;
      font-size: 50px;
      text-shadow: 1px 1px 2px black;
    }
  </style>


</head>

<body class="nav-md">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">
          <div class="navbar nav_title" style="border: 0;">
            <a href="." class="site_title"><i class="fa fa-paw"></i> <span>大帅体检</span></a>
          </div>

          <div class="clearfix"></div>

          <!-- menu profile quick info -->
          <div class="profile">
            <div class="profile_pic">
              <img src="./img/logo.png" alt="..." class="img-circle profile_img">
            </div>
            <div class="profile_info">
              <span>欢迎您,</span>
              <h2>请登录</h2>
            </div>
          </div>
          <!-- /menu profile quick info -->

          <br />

          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <div style="height: 70px;"></div>
              <ul class="nav side-menu">
                <li><a href="."><i class="fa fa-home"></i> 返回首页 </a>

                </li>


                <li><a><i class="fa fa-table"></i> 我要预约 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="./exam_package/show_packages">查看体检套餐</a></li>
                    <li><a href="./appointment_record/my_appoint">我的预约</a></li>
                  </ul>
                </li>
                <li><a><i class="fa fa-bar-chart-o"></i> 套餐管理<span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="./exam_package/add_health_item"> 体检项目管理</a></li>
                    <li><a href="./exam_package/show_package_list"> 体检套餐管理</a></li>
                  </ul>
                </li>
                <li><a><i class="fa fa-clone"></i> 预约管理 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="./appointment_record/appoint_list"> 查看预约</a></li>
                  </ul>
                </li>
              </ul>
            </div>

          </div>

        </div>
        <!-- /sidebar menu -->

        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
          <a data-toggle="tooltip" data-placement="top" title="Settings">
            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
          </a>
          <a data-toggle="tooltip" data-placement="top" title="FullScreen">
            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
          </a>
          <a data-toggle="tooltip" data-placement="top" title="Lock">
            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
          </a>
          <a data-toggle="tooltip" data-placement="top" title="Logout">
            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
          </a>
        </div>
        <!-- /menu footer buttons -->
      </div>
    </div>

    <!-- top navigation -->
    <div class="top_nav">

      <div class="nav_menu">
        <nav>
          <div class="nav toggle">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
          </div>

          <ul class="nav navbar-nav navbar-right">

            <li class="">
              <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                请登录
                <span class=" fa fa-angle-down"></span>
              </a>
              <ul class="dropdown-menu dropdown-usermenu pull-right">
                <li><a href="javascript:;">我的信息</a></li>
                <li><a href="javascript:;">修改密码</a></li>
                <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> 注销登录</a></li>
              </ul>
            </li>
          </ul>

        </nav>
      </div>
    </div>
    <!-- /top navigation -->

    <!-- page content -->
    <div class="right_col" role="main">
      <div class="">
        <div class="page-title">
          <div class="title_left">
            <h3>用户注册 <small>请填写您的信息</small></h3>
          </div>

          <div class="title_right">

          </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2>用户注册 <small>请保证填写信息真实有效</small></h2>
                <ul class="nav navbar-right panel_toolbox">
                  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                  </li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Settings 1</a>
                      </li>
                      <li><a href="#">Settings 2</a>
                      </li>
                    </ul>
                  </li>
                  <li><a class="close-link"><i class="fa fa-close"></i></a>
                  </li>
                </ul>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <p class="text-muted font-13 m-b-30">

                </p>
                <div class="x_content"><br>
                  <form data-parsley-validate class="form-horizontal form-label-left" id="reg_form" action="${pageContext.request.contextPath}/user/do_reg" method="post"
                        onsubmit='return checkForm()'>


                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mobile_no">手机号码 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="mobile_no" type="text" name="mobileNo" placeholder="手机号" class="form-control col-md-7 col-xs-12">
                      </div>
                      <div id="mobile_msg"></div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="password">密码 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="password" type="password" name="password" placeholder="密码" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="repass">再次输入 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="password" name="repass" id="repass" placeholder="再次输入密码" class="form-control col-md-7 col-xs-12">
                      </div>
                  </div>
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">姓名 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="name" type="text" name="name" placeholder="姓名" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">身份证 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="id_no" type="text" name="idNo" placeholder="请输入身份证号码" class="form-control col-md-7 col-xs-12">
                      </div>
                      <div id="id_msg"></div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12">性别</label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <div id="gender" class="btn-group" data-toggle="buttons">
                          <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
                            <input type="radio" name="gender" value="1"> &nbsp; Male &nbsp;
                          </label>
                          <label class="btn btn-primary" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
                            <input type="radio" name="gender" value="0"> Female
                          </label>
                        </div>
                      </div>
                    </div>


                    <div class="ln_solid"></div>
                    <div class="form-group">
                      <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                        <input id="subbtn" type="submit" class="btn btn-primary"/>
                        <input type="reset" class="btn btn-success"/>
                      </div>
                    </div>

                  </form>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /page content -->

  <!-- footer content -->
  <footer>
    <div class="pull-right">
      大帅体检 - 关注您的健康 by <a href="https://www.dshealth.com">大帅体检</a>
    </div>
    <div class="clearfix"></div>
  </footer>
  <!-- /footer content -->
  </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/css/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/Chart.js"></script>
<script src="${pageContext.request.contextPath}/js/gauge.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-progressbar.min.js"></script>
<script src="${pageContext.request.contextPath}/js/icheck.js"></script>
<script src="${pageContext.request.contextPath}/js/skycons.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.pie.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.time.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.stack.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.resize.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.orderBars.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.spline.min.js"></script>
<script src="${pageContext.request.contextPath}/js/curvedLines.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.vmap.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.vmap.world.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.vmap.sampledata.js"></script>
<script src="${pageContext.request.contextPath}/js/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/js/daterangepicker.js"></script>
<script src="${pageContext.request.contextPath}/js/custom.min.js"></script>
<script>
  //密码校验函数
  function checkForm(){
    let password = document.getElementById("pass");
    let rePass = document.getElementById("repass");


    if(password.value == rePass.value){
      return true;
    } else {
      alert("两侧输入密码不一致");
      return false;
    }
  }

  //定义AJAX访问地址
  let url = "${pageContext.request.contextPath}/user/select_user_by_id_no_or_mobile_no";
  //定义用户对象
  let user = {};
  //设定手机号文本框失去焦点事件
  $("#mobile_no").blur(()=>{
    //获取填入的手机号
    user.mobileNo = $("#mobile_no").val();
    //AJAX访问后端地址，查询该手机号是否存在
    $.ajax({
      //定义请求方式
      type: "post",
      //访问地址，上面定义过
      url:  url,
      //定义提交格式
      contentType: "application/json",
      //定义参数，转成字符串
      data:JSON.stringify(user),
      //定义接收参数格式
      dataType: "json",
      success: function(data) {
        //如果接收导的信息编码为2000，表示用户存在
        if (data.code == 2000){
          //设置显示信息
          $("#mobile_msg").html("该手机号已注册")
          //关闭提交按钮
          $("#subbtn").attr("disabled",true);
        }else {
          //开启提交按钮
          $("#subbtn").removeAttr("disabled")
        }
        console.log(data);
      },
      error: function(msg) {
        console.log(msg)
      }
    })
  });

  //和上面内容一致，注释不再重复
  $("#id_no").blur(()=>{
    user.idNo = $("#id_no").val();
    $.ajax({
      type: "post",
      url:  url,
      contentType: "application/json",
      data:JSON.stringify(user),
      dataType: "json",
      success: function(data) {
        if (data.code == 2000){
          $("#id_msg").html("该身份证号码已注册")
          $("#subbtn").attr("disabled",true);
        }else {
          $("#subbtn").attr("disabled");
          $("#subbtn").removeAttr("disabled");
        }
        console.log(data)
      },
      error: function(msg) {
        console.log(msg)
      }
    })
  })

</script>

</body>
</html>

